<template>
  <view class="my-page">
    <view class="header">
      <u-navbar
        title="我的"
        :fixed="true"
        :placeholder="true"
        :autoBack="false"
        bgColor="transparent"
        :titleStyle="{ color: '#000' }"
        leftIconColor="transparent"></u-navbar>
      <image
        src="/static/image/bg.png"
        mode="aspectFill"
        class="bg-img"></image>
      <view class="flex info">
        <image src="/static/avatar.png" mode="aspectFit"></image>
        <view class="flex1 info-t" v-if="vuex_is_login" @click="toUser()">
          <view class="">xingming</view>
          <view class="info-t-des">34234242343242</view>
        </view>
        <view class="flex1 info-t" v-else @click="toUser()">登录/注册</view>
      </view>
      <view class="jf-wrap flex">
        <view class="jf-box column-flex-center" @click="goJf(0)">
          <view class="">10000</view>
          <view class="">购物积分</view>
        </view>
        <view class="jf-box column-flex-center" @click="goJf(1)">
          <view class="">10000</view>
          <view class="">功勋积分</view>
        </view>
        <view class="jf-box column-flex-center" @click="goJf(2)">
          <view class="">10000</view>
          <view class="">学术积分</view>
        </view>
        <view class="jf-box column-flex-center" @click="goJf(3)">
          <view class="">10000</view>
          <view class="">积分卡</view>
        </view>
        <view class="jf-box column-flex-center">
          <view class="">10000</view>
          <view class="">点赞</view>
        </view>
      </view>
    </view>

    <view class="nav-wrap flex">
      <view
        class="column-flex-center nav-box"
        v-for="(item, index) in navList"
        :key="index"
        @click="goPage(index)">
        <image :src="item.Image" mode="aspectFit"></image>
        <view class="">{{ item.title }}</view>
      </view>
    </view>

    <view class="nav-wrap1 flex">
      <view
        class="column-flex-center nav-box1"
        v-for="(item, index) in navList1"
        :key="index"
        @click="goPage1(index)">
        <image :src="item.Image" mode="aspectFit"></image>
        <view class="">{{ item.title }}</view>
      </view>
    </view>
    <view class="nav-wrap2 flex">
      <view
        class="nav-box2 column-flex-center"
        v-for="(item, index) in navList2"
        :key="index"
        @click="goPage2(index)">
        <image :src="item.Image" mode="aspectFit"></image>
        <view class="">{{ item.title }}</view>
      </view>
    </view>
    <view class="btn" @click="() => (show = true)">退出账号</view>
    <avatar_nick_pop ref="avatar_nick_pop" @confirm="confirmAvatarNick" />
    <kefu_pop ref="kefu_pop" />
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      @close="() => (show = false)">
      <view class="pop-wrap">
        <view class="pop-t">是否退出当前账号？</view>
        <view class="pop-btn flex-between">
          <view class="" @click="() => (show = false)">取消</view>
          <view class="" @click="() => (show = false)">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import avatar_nick_pop from "@/components/login/avatar_nick_pop.vue";
import kefu_pop from "@/components/my/kefu_pop.vue";
export default {
  components: {
    avatar_nick_pop,
    kefu_pop,
  },
  data() {
    return {
      show: false,
      navList: [
        {
          title: "发布作品",
          Image: require("@/static/image/m1.png"),
        },
        {
          title: "作品管理",
          Image: require("@/static/image/m2.png"),
        },
        {
          title: "订单管理",
          Image: require("@/static/image/m3.png"),
        },
        {
          title: "已购作品",
          Image: require("@/static/image/m4.png"),
        },
      ],
      navList1: [
        {
          title: "任务管理",
          Image: require("@/static/image/m5.png"),
        },
        {
          title: "任务统计",
          Image: require("@/static/image/m6.png"),
        },
      ],
      navList2: [
        {
          title: "我的发票",
          Image: require("@/static/image/m7.png"),
        },
        {
          title: "修改密码",
          Image: require("@/static/image/m8.png"),
        },
        {
          title: "在线客服",
          Image: require("@/static/image/m9.png"),
        },
        {
          title: "意见反馈",
          Image: require("@/static/image/m10.png"),
        },
        {
          title: "关于我们",
          Image: require("@/static/image/m11.png"),
        },
      ],
    };
  },
  methods: {
    //退出登录
    outLogin() {
      uni.showModal({
        content: "是否退出当前账号？",
      });
    },
    // 头像昵称
    confirmAvatarNick(option) {
      this.query_user();
    },
    query_user() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_userInfo",
        },
      }).then((res) => {
        this.$logjson("个人中心用户信息", res);
        if (res.code == 200) {
          let data = res.data;
          // data.token = data.token;
          // data.userId = data.id;
          //
          this.$store.commit("set_vuex_user", data);

          //商家身份
          let has_mobile = data.ifNeedBindPhone != 1; //是否需要注册用户  ifNeedBindPhone = 1 需要注册
          let has_avatar = !!data.image;
          let has_nick = !!data.nickname;
          if (has_mobile) {
            if (!has_avatar || !has_nick) {
              this.$nextTick(() => {
                this.$refs.avatar_nick_pop.init();
              });
            }
          }

          this.numberInfo = {
            orderNeedPay: data.orderNeedPay,
            orderNeedDelivery: data.orderNeedDelivery,
            orderNeedShouhuo: data.orderNeedShouhuo,
            orderNeedComment: data.orderNeedComment,
            orderRefundNum: data.orderRefundNum,
            orderNeedHexiao: data.orderNeedHexiao,
            orderNum: data.orderNum,
          };
        } else {
          this.$store.commit("remove_vuex_user", false);
        }
      });
    },
    goPage(index) {
      const action = {
        0: "/publish-work",
        1: "/work-list",
        2: "/order-management",
      };
      if (index == 3) {
        this.toRoute({
          path: "/order-management",
          query: {
            type: 1,
          },
        });
        return;
      }
      this.toRoute(action[index]);
    },
    goPage1(k) {
      const action = {
        0: "/order-list",
        1: "/task-statistics",
      };
      this.toRoute(action[k]);
    },
    goPage2(k) {
      const action = {
        0: "/invoice-list", //我的发票
        1: "",
        2: "",
        3: "/feedback",
        4: "/about",
      };
      if (k == 2) {
        this.$refs.kefu_pop.init();
        return;
      }
      this.toRoute(action[k]);
    },
    goJf(k) {
      console.log("点击k---");
      const action = {
        0: "/balance",
        1: "/points-record",
        2: "/dz-list", //我的点赞
        3: "/leave-aplication", //请假
        4: "/points-list", //职评学术积分统计表
      };
      this.toRoute(action[k]);
    },
    toUser() {
      if (!this.mix_checkLogin()) {
        return;
      }

      // this.toRoute('/my-info')
      if (!this.mix_is_set_phone) {
        this.toRoute({
          path: "/login",
        });
        return;
      } else if (!this.mix_is_set_avatar_nick) {
        this.$nextTick(() => {
          this.$refs.avatar_nick_pop.init();
        });
        return;
      } else {
        this.toRoute("/my-info");
      }
    },
  },
};
</script>

<style lang="scss">
/deep/ .u-popup {
  flex: 0 !important;
}
.my-page {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  .header {
    width: 100%;
    position: relative;
    .bg-img {
      width: 100%;
      height: 432upx;
      position: absolute;
      top: 0;
      left: 0;
    }
    .info {
      position: relative;
      z-index: 10;
      padding: 40upx 32upx 30upx;
      & > image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      &-t {
        padding-left: 32upx;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        &-des {
          font-size: 24rpx;
          color: #000000;
          margin-top: 10upx;
          font-weight: 400;
        }
      }
    }
    .jf-wrap {
      padding: 0 32upx;
      position: relative;
      z-index: 15;
      .jf-box {
        width: 20%;
        & > view {
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
        & > view:nth-of-type(1) {
          font-weight: 800;
          font-size: 32rpx;
          color: #f49c0d;
          margin-bottom: 2upx;
        }
      }
    }
  }
  .nav-wrap {
    margin: 20upx auto 24upx;
    width: 686rpx;
    height: 168rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .nav-box {
      width: 25%;
      font-size: 24rpx;
      color: #000000;
      & > image {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 10upx;
      }
    }
  }
  .nav-wrap1 {
    width: 686rpx;
    height: 176rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 0 auto 24upx;
    .nav-box1 {
      width: 50%;
      font-size: 24rpx;
      color: #000000;
      & > image {
        width: 56rpx;
        height: 54rpx;
        margin-bottom: 10upx;
      }
    }
  }
  .nav-wrap2 {
    width: 686rpx;
    height: 168rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 0 auto 40upx;
    .nav-box2 {
      width: 20%;
      font-size: 24rpx;
      color: #000000;
      & > image {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 10upx;
      }
    }
  }
  .btn {
    width: 686rpx;
    height: 88rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    text-align: center;
    line-height: 88upx;
    font-size: 24rpx;
    color: #a5a8b5;
    margin: 0 auto;
  }
  .pop-wrap {
    width: 686rpx;
    padding: 54upx 24upx 0;
    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    .pop-t {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 58upx;
      text-align: center;
    }
    .pop-btn {
      & > view {
        width: 310rpx;
        height: 80rpx;
        background: #f49c0d;
        font-weight: bold;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 80upx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
      }
      & > view:nth-of-type(1) {
        background: #f6f6f6;
        color: #9695a3;
      }
    }
  }
}
</style>
